<template>
	<base-page>
		<view class="scalelist">
			<view class="scalelist-box">
				<view class="scalelist-left">
					<view class="scale-title">
						电子秤
						<text class="iconfont icongengduo1"></text>
					</view>
					<view class="scale-list-wrap">
						<block v-if="list.length > 0">
							<scroll-view scroll-y="true" class="scale-list-scroll all-scroll"
								@scrolltolower="getScaleList">
								<view class="item" @click="scaleSelect(item, index)" v-for="(item, index) in list"
									:key="index" :class="index == selectScaleKeys ? 'itemhover' : ''">
									<view class="item-right w-full">
										<view class="flex justify-between w-full">
											<view class="scale-name">{{ item.name }}<text
													class="scale-type-tag">{{ item.type == 'cashier' ? '收银秤': '条码秤' }}</text>
											</view>
											<view class="flex items-center" v-if="item.connect_status">
												<text class="status-icon success"></text>已连接
											</view>
											<view class="flex items-center" v-else>
												<text class="status-icon fail"></text>未连接
											</view>
										</view>
										<view class="scale-money">{{ item.brand_name }}-{{ item.model_name }}</view>
									</view>
								</view>
							</scroll-view>
						</block>
						<view class="notYet" v-else-if="!one_judge && list.length == 0">暂无电子秤</view>
					</view>
					<view class="add-printer"><button type="default" class="primary-btn"
							@click="addScale">添加电子秤</button></view>
				</view>
				<view class="scalelist-right" v-show="!one_judge">
					<view class="scale-title">电子秤详情</view>
					<view class="scale-information">
						<block v-if="JSON.stringify(detail) != '{}'">
							<view class="title">基本信息</view>
							<view class="information-box">
								<view class="box-left">
									<view class="information">
										<view>电子秤名称：</view>
										<view>{{ detail.name }}</view>
									</view>
									<view class="information">
										<view>电子秤类型：</view>
										<view>{{ detail.type == 'cashier' ? '收银秤': '条码秤' }}</view>
									</view>
									<view class="information">
										<view>电子秤品牌：</view>
										<view>{{ detail.brand_name }}</view>
									</view>
									<view class="information">
										<view>电子秤型号：</view>
										<view>{{ detail.model_name }}</view>
									</view>
								</view>
							</view>
							<view class="button-box">
								<view class="button" @click="deleteScale(detail.scale_id)">删除</view>
								<view class="button" @click="editScale(detail.scale_id)">修改</view>
							</view>
						</block>
						<block v-else>
							<image class="cart-empty" :src="$util.img('upload/uniapp/cashier/cart_empty.png')"
								mode="widthFix"></image>
						</block>
					</view>
				</view>
			</view>
		</view>
	</base-page>
</template>

<script>
	import unipopup from '@/components/uni-popup/uni-popup.vue';

	var self;

	export default {
		components: {
			unipopup
		},
		data() {
			return {
				selectScaleKeys: 0,
				search_text: '',
				page: 1,
				// 每次返回数据数
				page_size: 8,
				// 第一次请求列表做详情渲染判断
				one_judge: true,
				//详情数据
				detail: {},
				brandList: {
					yilianyun: '易联云',
					'365': '365'
				},
				template: {},
				list: [],
				connectSuccess: []
			};
		},
		onLoad() {
			// 初始化请求打印机列表数据
			this.getScaleList();
			self = this;
		},
		methods: {
			switchStoreAfter() {
				this.page = 1;
				this.list = [];
				this.detail = {};
				this.one_judge = false;
				this.getScaleList()
			},
			getScaleList() {
				if (!this.addon.includes('scale')) {
					this.$util.showToast({
						title: '未安装电子秤插件'
					});
					return;
				}
				this.$api.sendRequest({
					url: '/scale/storeapi/scale/page',
					data: {
						page: this.page,
						page_size: this.page_size
					},
					success: res => {
						if (res.data.list.length == 0 && this.one_judge) {
							this.detail = {};
							this.one_judge = false;
						}

						if (res.code >= 0 && res.data.list.length != 0) {
							this.page += 1;
							if (this.list.length == 0) {
								this.list = res.data.list;
							} else {
								this.list = this.list.concat(res.data.list);
							}

							// 检测设备是否连接
							this.checkConnect()

							//初始时加载一遍详情数据
							if (this.one_judge) {
								this.getScaleDetail(this.list[0].scale_id);
							}
						}
					}
				});
			},
			scaleSelect(item, keys) {
				this.selectScaleKeys = keys;
				this.getScaleDetail(item.scale_id);
			},
			addScale() {
				this.$util.redirectTo('/pages/scale/add');
			},
			editScale(scale_id) {
				this.$util.redirectTo('/pages/scale/add', {
					scale_id: scale_id
				});
			},
			getScaleDetail(scale_id) {
				this.$api.sendRequest({
					url: '/scale/storeapi/scale/detail',
					data: {
						scale_id
					},
					success: res => {
						if (res.code == 0) {
							this.detail = res.data;
							this.one_judge = false;
						}
					}
				});
			},
			deleteScale(scale_id) {
				let that = this;
				uni.showModal({
					title: '',
					content: '确定要删除吗',
					success: function(res) {
						if (res.confirm) {
							that.$api.sendRequest({
								url: '/scale/storeapi/scale/delete',
								data: {
									scale_id
								},
								success: res => {
									if (res.code >= 0) {
										that.page = 1;
										that.list = [];
										that.one_judge = true;
										that.getScaleList();
									} else {
										that.$util.showToast({
											title: res.message
										});
									}
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			checkConnect() {
				if (typeof window.POS_DATA_CALLBACK == 'function') delete window.POS_DATA_CALLBACK;
				/**
				 * 商品同步数据回调
				 * @param {Object} text
				 */
				window.POS_DATA_CALLBACK = function(text) {
					let data = text.split(':');
					let index = parseInt(data[0])

					switch (data[1]) {
						case 'PingWeigher':
							self.$set(self.list[index], 'connect_status', parseInt(data[3]))
							break;
					}
				}

				try {
					let weigher = this.list.map(item => {
						item.config = typeof item.config == 'string' ? JSON.parse(item.config) : scale.config;
						return item
					})

					try {
						POS_.send('PingWeigher', JSON.stringify({
							weigher
						}));
					} catch (e) {}
				} catch (e) {}
			}
		}
	};
</script>

<style scoped lang="scss">
	@import './public/css/scale.scss';
</style>